<template>
  <picker
    mode="multiSelector"
    :range="timeArr"
    :value="indexArr"
    @change="handlePickerChange"
    @columnchange="handlePickerColumnChange"
  >
    <input
      mode="wrapped"
      :value="selectedVal"
      placeholder="请选择时间"
      maxlength="999999"
      disabled
    >
    <!-- <span>{{selectedVal}}</span> -->
  </picker>
</template>

<script>
export default {
  components: {},
  props: {
    date: {
      type: String,
      required: false,
      default: ''
    }
  },
  data () {
    return {
      timeArr: [[], [], [], [], [], []],
      indexArr: [],
      selectedVal: '',
      tempDateObj: { year: '', month: '' }
    }
  },
  computed: {
    val () {
      if (this.selectedVal) {
        return this.selectedVal
      } else {
        return ''
      }
    }
  },
  watch: {
    date (val) {
      this.selectedVal = val
    }
  },
  created () {
    this.selectedVal = this.date
    this.initTime()
    this.initVal()
  },
  mounted () {},
  onShow () {
    if (this.date) {
      this.selectedVal = this.date
    } else {
      this.selectedVal = ''
    }
  },
  methods: {
    initTime () {
      const vm = this
      let yearNow = new Date().getFullYear()

      let arr = [
        { key: 'year', start: yearNow - 10, end: yearNow },
        { key: 'month', start: 1, end: 12 },
        { key: 'day', start: 1, end: vm.lastDayOfMonth(yearNow - 10, 1) },
        { key: 'hour', start: 0, end: 23 },
        { key: 'minute', start: 0, end: 59 },
        { key: 'second', start: 0, end: 59 }
      ]

      arr.forEach((obj, idx) => {
        vm.refreshTime(obj.start, obj.end, obj.key)
      })

      vm.tempDateObj.year = yearNow - 10
      vm.tempDateObj.month = 1
    },
    initVal () {
      if (this.date) {
        let temp = new Date(this.date)

        let year = temp.getFullYear()
        let month = temp.getMonth() + 1
        // let day = temp.getDate()
        // let hour = temp.getHours()
        // let minute = temp.getMinutes()
        // let second = temp.getSeconds()

        this.refreshTime(1, this.lastDayOfMonth(year, month), 'day')

        // this.indexArr = [
        //   this.timeArr[0].indexOf(year),
        //   month - 1,
        //   day - 1,
        //   hour,
        //   minute,
        //   second
        // ]
      }
    },
    refreshTime (start, end, key) {
      let keys = ['year', 'month', 'day', 'hour', 'minute', 'second']
      let newArr = this.numberArr(start, end)
      this.timeArr[keys.indexOf(key)].length = end - start + 1
      for (const idx in newArr) {
        this.timeArr[keys.indexOf(key)][idx] = newArr[idx]
      }
    },
    handlePickerColumnChange (e) {
      let idx1 = e.target.column
      let idx2 = e.target.value

      let val = this.timeArr[idx1][idx2]
      if (idx1 === 0) {
        this.tempDateObj.year = val
        this.refreshTime(
          1,
          this.lastDayOfMonth(val, this.tempDateObj.month),
          'day'
        )
      } else if (idx1 === 1) {
        this.tempDateObj.month = val
        this.refreshTime(
          1,
          this.lastDayOfMonth(this.tempDateObj.year, val),
          'day'
        )
      }
    },
    handlePickerChange (e) {
      let arr = e.target.value
      // this.indexArr = arr

      let year = this.timeArr[0][arr[0]]
      let month = this.timeArr[1][arr[1]]
      let day = this.timeArr[2][arr[2]]
      let hour = this.timeArr[3][arr[3]]
      let minute = this.timeArr[4][arr[4]]
      let second = this.timeArr[5][arr[5]]

      this.selectedVal = `${year}-${month}-${day} ${hour}:${minute}:${second}`
      this.$emit('change', this.selectedVal)
    },
    lastDayOfMonth (year, month) {
      let tempDate = new Date(`${year}/${month}/1`)

      tempDate.setMonth(month)
      tempDate.setDate(0)

      return tempDate.getDate()
    },
    numberArr (start, end) {
      let arr = []
      for (let index = 0; index <= end - start; index++) {
        let r = (start + index).toString()
        let length = end.toString().length - r.length + 1
        let append = new Array(length).join('0')
        arr[index] = append + r
      }
      return arr
    }
  }
}
</script>